Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2019, 06:23
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Перевести запрос в асинхронный и вернуть массив
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Web Audio Player Demo | Easy-Code.ru</title>
  <link rel="stylesheet" href="css/normalize.css"/>
  <link type="text/css" href="css/style.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/> 
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>

  
<style type="text/css">
  #datepicker, #datepicker1{
     


  }
   #bl1 div{
      float: left;
      margin-left: 5%;
      

  }
  #bl1{
      border: 0px solid red;
      width: 80%;
      height: 40%;
      position: absolute;
      right: 0px;


  }

#test{
  margin-top: 19%;
}

</style>
</head>
<body>
<div style="width: 100%; text-align: center; font-family: 'Cormorant Infant', serif;"><h1>Курсы доллара за период <span class="txt">10.07.2018</span> - <span class="txt1">23.07.2018</span> (НБУ)</h1></div>
  <div id="bl1">
    <div>
      <p><input type="text" id="datepicker"/></p>
    </div>
    <div>
      <p><input type="text" id="datepicker1"/></p>
    </div>
    <div><button id="test">Расчитать</div>
  </div>
  <div id="myChart" style="margin-top: 118px; width: 50%; height: 50%;"></div>

  <script type="text/javascript">
   $(function(){

      



      $( "#datepicker" ).datepicker({
        altFormat: "mm.yy.dd",
        dateFormat: "yy.mm.dd",
        monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        dayNamesMin: [ "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс" ],
         onSelect: function(dateText, inst) {
      $(".txt").text(dateText);}

       });


       $( "#datepicker1" ).datepicker({
        altFormat: "mm.yy.dd",
        dateFormat: "yy.mm.dd",
        monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
        dayNamesMin: [ "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс" ],
         onSelect: function(dateText, inst) {
      $(".txt1").text(dateText);}
        })

      
console.log($( "#datepicker" )[0].value )

$('#test').click(function(){


  var yeaR = $( "#datepicker" )[0].value[0] + $( "#datepicker" )[0].value[1] + $( "#datepicker" )[0].value[2] + $( "#datepicker" )[0].value[3],
      MonS = $( "#datepicker" )[0].value[5] + $( "#datepicker" )[0].value[6],
      DaY  = $( "#datepicker" )[0].value[8] + $( "#datepicker" )[0].value[9];
      

  var yeaR_fin =  $( "#datepicker1" )[0].value[0] + $( "#datepicker1" )[0].value[1] + $( "#datepicker1" )[0].value[2] + $( "#datepicker1" )[0].value[3],
      MonS_fin =  $( "#datepicker1" )[0].value[5] + $( "#datepicker1" )[0].value[6],  
      daY_fin  =  $( "#datepicker1" )[0].value[8] + $( "#datepicker1" )[0].value[9];
 

  function  plusD(){
      var    data_plus  = new Date(1000 * 60 * 60 * 24),
             us_Mill    = data_plus.getTime();
             return us_Mill;        

     }

    
    function finish(){
    var      data_plus  = new Date(yeaR_fin, MonS_fin - 1, daY_fin),
             us_Mill    = data_plus.getTime();
             return us_Mill;    

    }

     function start(){
    var      data_plus  = new Date(yeaR, MonS - 1, DaY),
             us_Mill    = data_plus.getTime();
             return us_Mill;    

    }

    var sTarrT  = start();
    var fin     = finish();
    var plus    = plusD();
    
    function diff(){
     var rest = fin - sTarrT
      return Math.floor(rest / (1000 * 60 * 60 * 24));

    }
      
    var difF = diff();



    function proth(){
        var mas   =  [];      
        
      for(var i = 0; i <= difF; i++){
        var     dataChikl      = new Date(sTarrT),
                ChiklY         = dataChikl.getFullYear(),
                ChiklM         = dataChikl.getMonth()+1,
                ChiklD         = dataChikl.getDate();

         if(ChiklM < 10 && ChiklD < 10){
                ChiklD         = '0'+ ChiklD;
                ChiklM         = '0'+ ChiklM;
        }
                else if(ChiklM < 10){
                ChiklM         = '0'+ ChiklM;
        }
                else if(ChiklD < 10){
                ChiklD         = '0'+ ChiklD;
        }

        
        var y;
        $.ajax({
          async:false,
          url  : `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?date=${ChiklY}${ChiklM}${ChiklD}&json`,
          success : function(data){
            y = data[27].rate;
        }})


        mas.push(y);
        sTarrT = sTarrT + plus;

      }
        
      return mas;
      

    }

   

  
 Highcharts.chart('myChart', {
  subtitle: {
        text: 'Cтатистика курса'
    },

   xAxis: {
    categories: [ 'Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Ноябрь','Декабрь']
  },

    yAxis: {
        title: {
            text: 'Курс гривна/доллар'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

   

    series: [{
        name: '1$',
        data: proth()
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
   
})

   })


  </script>
</body>
</html>


Доброго времени суток нужно ускорить аякс запрос. Знаю что нужно сделать запрос асинхронным, но вопрос в том что как мне при асинхронном запросе вернуть из функции "proth" вернуть "mas" Дело в том что если я делаю запрос асинхронным то в mas возвращает "undefined" Знаю что-то про колбеки через таймеры и промисы но для меня это дримучий лес помогите! За ранее спасибо :) :help:
Ответить с цитированием
  #2 (permalink)  
Старый 10.02.2019, 08:07
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Web Audio Player Demo | Easy-Code.ru</title>
	<link rel="stylesheet" href="css/normalize.css" />
	<link type="text/css" href="css/style.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<style>
		#datepicker,
		#datepicker1 {}

		#bl1 div {
			float: left;
			margin-left: 5%;
		}

		#bl1 {
			border: 0px solid red;
			width: 80%;
			height: 40%;
			position: absolute;
			right: 0px;
		}

		#test {
			margin-top: 19%;
		}
	</style>
</head>

<body>
	<div style="width: 100%; text-align: center; font-family: 'Cormorant Infant', serif;">
		<h1>Курсы доллара за период <span class="txt">10.07.2018</span> - <span class="txt1">23.07.2018</span> (НБУ)</h1>
	</div>
	<div id="bl1">
		<div>
			<p><input type="text" id="datepicker" /></p>
		</div>
		<div>
			<p><input type="text" id="datepicker1" /></p>
		</div>
		<div><button id="test">Расчитать</button></div>
	</div>
	<div id="myChart" style="margin-top: 118px; width: 50%; height: 50%;"></div>

	<script>
		
		Highcharts.setOptions({
			lang: {
				months: [
					'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
					'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
				],
				shortMonths: [
					"янв", "фев", "март", "апр", "май", "июнь",
					"июль", "авг", "сент", "окт", "ноя", "дек"
				]
			}
		});
		
		$(function() {
			$("#datepicker").datepicker({
				altFormat: "dd.mm.yy",
				dateFormat: "dd.mm.yy",
				monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
				dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
				onSelect: function(dateText, inst) {
					$(".txt").text(dateText);
				}

			});

			$("#datepicker1").datepicker({
				altFormat: "dd.mm.yy",
				dateFormat: "dd.mm.yy",
				monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
				dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
				onSelect: function(dateText, inst) {
					$(".txt1").text(dateText);
				}
			});

			$('#test').click(async function() {
				var dp = $("#datepicker").val();				
				var [DaY, MonS, yeaR] = dp.split(".");
				
				var dp1 = $("#datepicker1").val();
				var [daY_fin, MonS_fin, yeaR_fin] = dp1.split(".");

				function plusD() {
					return 1000 * 60 * 60 * 24;
				}

				function finish() {
					var data_plus = new Date(yeaR_fin, MonS_fin - 1, daY_fin);
					return data_plus.getTime();
				}

				function start() {
					var data_plus = new Date(yeaR, MonS - 1, DaY);
					return data_plus.getTime();
				}

				var sTarrT = start();
				var fin = finish();
				var plus = plusD();

				function diff() {
					var rest = fin - sTarrT
					return Math.floor(rest / (1000 * 60 * 60 * 24));
				}

				var difF = diff();

				async function proth() {
					var mas = [];

					for (var i = 0; i <= difF; i++) {
						var dataChikl = new Date(sTarrT),
							ChiklY = dataChikl.getFullYear(),
							ChiklM = dataChikl.getMonth() + 1,
							ChiklD = dataChikl.getDate();

						if (ChiklM < 10 && ChiklD < 10) {
							ChiklD = '0' + ChiklD;
							ChiklM = '0' + ChiklM;
						} else if (ChiklM < 10) {
							ChiklM = '0' + ChiklM;
						} else if (ChiklD < 10) {
							ChiklD = '0' + ChiklD;
						}

						var data = await $.ajax({
							url: `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?date=${ChiklY}${ChiklM}${ChiklD}&json`
						});
						
						var y = "27" in data ? data[27].rate : NaN;

						mas.push([sTarrT, y]);
						sTarrT += plus;
					}

					return mas;
				}
				
				$("#myChart").html(`<div class="loading">Загрузка…</div>`);

				Highcharts.chart('myChart', {
					subtitle: {
						text: 'Cтатистика курса'
					},

					xAxis: {
						type: 'datetime',
						dateTimeLabelFormats: {
							month: '%e %b',
							year: '%b'
						}
					},

					yAxis: {
						title: {
							text: 'Курс гривна/доллар'
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle'
					},

					series: [{
						name: '1$',
						data: await proth()
					}],

					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'center',
									verticalAlign: 'bottom'
								}
							}
						}]
					}
				});
			})
		})
	</script>
</body>
</html>

Последний раз редактировалось Malleys, 10.02.2019 в 08:59.
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2019, 13:57
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Очень круто! Спасибо! Если бы вы еще немного объяснили или хотябы статью указали по этой теме было бы вообще шикарно!))
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2019, 21:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от oleg901
статью указали по этой теме было бы вообще шикарно!
Вот, например, статья об асинхронной функции https://habr.com/ru/company/ruvds/blog/414373/

И вы можете в поисковой системе спрашивать всё, что хотите на эту тему, справочники, книги, видео, блоги, и пр. почти бесконечное объяснение, что же такое асинхронная функция. Попробуйте исследовать. https://www.google.us/search?q=async+await+javascript
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция реализует промис, вернуть массив строк из него JakyL Javascript под браузер 0 11.10.2017 00:06
Как можно методом ajax вернуть ассоциативный массив js? Hurray AJAX и COMET 2 09.01.2016 00:19
Асинхронный ajax запрос imonzx AJAX и COMET 3 13.06.2015 00:02
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 15:36
Подскажите, как вернуть js-скрипт массив Polkan AJAX и COMET 18 30.04.2010 23:30